<template>
  <div class="topCon">
    <el-row class="topTitleBox">
      <!-- <img src="../../../static/img/logo.png" alt="" class="img"> -->
      <img :src="this.$store.state.areaInfoArr.mainTopImg" alt="" class="img" />
      <span class="systemName">
        {{ this.$store.state.areaInfoArr.mainTopText }}
      </span>
      <div class="fr activeFl" v-show="isShow">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="0">首页</el-menu-item>
          <el-menu-item index="1">政策通告</el-menu-item>
          <el-menu-item v-if="!isYS()" index="2">常见问题</el-menu-item>
          <!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
        </el-menu>
      </div>
      <div class="fr" v-show="isShowToHome">
        <el-menu
          default-active="-1"
          class="el-menu-demo"
          mode="horizontal"
          @select="toHome"
        >
          <el-menu-item index="0">返回首页</el-menu-item>
        </el-menu>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: '',
    }
  },
  //传参
  props: ['isShowType', 'activeIndex', 'isShowToHome'],
  mounted() {
    this.isShow = this.isShowType ? true : false
  },

  methods: {
    handleSelect(val) {
      if (val == '0') {
        this.$router.push({
          path: '/login/loginFirst',
        })
      } else if (val == '1') {
        this.$router.push({
          path: '/common/policyAnnunciate',
        })
      } else if (val == '2') {
        this.$router.push({
          path: '/common/routineProblem',
        })
      }
    },
    toHome() {
      this.$router.push({
        path: '/login/loginFirst',
      })
    },
  },
}
</script>
<style scoped lang="less">
@basebackground: transparent;
.topTitleBox {
  height: 64px;
  line-height: 64px;
  //    background: @basebackground;
  background: url('../../../static/img/loginImg/top.png') no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  color: #fff;
  padding: 0 15px;
  .systemName {
    font-weight: bold;
    text-shadow: 2px 3px 3px #000;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .img {
    width: 38px;
    height: 40px;
    margin-top: -7px;
    margin-right: 10px;
    //   display: inline-block;
    vertical-align: middle;
  }
  .el-menu {
    background: @basebackground;
    color: #fff;
  }
  .el-menu-item {
    padding: 0 2px;
    margin: 0 30px;
  }
  .el-menu-item:hover,
  .el-menu-item:focus,
  .is-active {
    background: @basebackground !important;
    color: #fff !important;
    border-bottom: 3px solid #67fefc;
  }
  .el-menu--horizontal > .el-menu-item {
    color: #fff;
  }
}
</style>
